<style>
    .nomeProduto{
        color: red;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
    }
    .tituloFamilia{
        text-align: center;
        font-weight: bold;
        color: #575757;
        font-size: 18px;
    }
    .fotoProd{
        text-align: center;
        width: 96px;
        height: 146px;
    }
    .descricaoProd{
        float: left;
        width: 100%;
        text-align: left;
        font-family: helvetica;
        font-size: 12px;
        margin-top: 8px;
    }
    .itemPed{
        float: left;
        width: 100%;
        text-align: center;
    }
    .tdDescricao{
        width: 200px;
    }
    .precoProd{
        text-align: center;
        width: 100%;
        height: 30px;
        font-weight: bold;
        color: black;
    }
    .qntItem{
        width: 32px;
        height: 10px;
        margin-top: 5px;
    }
    .linhaQnt{
        text-align: left;
        float: left;
    }
    .labelQnt{
        color: red;
    }
    .imgMais,.imgMenos{
        cursor: pointer;
    }
    .tableFamilia{
        width: 400px;
        margin-bottom: 50px;
        float: left;
        text-align: left;
        margin-left: 50px;
    }
    .tableaProduto{
        width: 300px;
    }
    li{
        display: inline;
        float: left;
    }
    ul{
        list-style: none;
    }
    #btCOmprar{
        margin-bottom: 50px;
        width: 100px;
        height: 40px;
    }
    #mesas{
        text-align: center;width: 100%;float: left;
    }
</style>
<div style="width: 100%; text-align: center; float: left;">
    <div id="mesas">
        <label style="float:left;padding-right: 15px;">
            Mesa:
        </label>
        <select name="mesa" id="mesa" style="float:left;">
            <?php foreach ($this->mesas as $mesa):?>
                <option value="<?= $mesa['idmesa'] ?>"><?= $mesa['idmesa'] ?> - <?= $mesa['lugares'] ?> lugares</option>
            <?php endforeach;?>
            
        </select>
    </div>
    <table class="tableFamilia">
        <tbody>
            <tr>
                <td><input type="checkbox" name="familia" checked="checked" id="familia1" value="1" class="chFamilia" /> Cervejas</td>
                <td><input type="checkbox" name="familia" checked="checked" id="familia2" value="2" class="chFamilia" /> Pratos</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="familia" checked="checked" id="familia3" value="3" class="chFamilia" /> Whisky</td>
                <td><input type="checkbox" name="familia" checked="checked" id="familia4" value="4" class="chFamilia" /> Vinhos</td>
            </tr>
        </tbody>
    </table>
</div>

<div style="text-align: center;">
    <input type="button" value="Comprar" id="btComprar" />
</div>


<ul>
    <?php foreach ($this->produtos as $produto): ?>
        <li class="fam_<?= $produto['familia']?>">
            <table class="tableaProduto">
                <input type="hidden" class="codigo" value="<?=$produto['idprodutos'] ?>"/>
                <tr><td></td><td><div class="nomeProduto"><?= utf8_encode($produto['produto']) ?></div></td></tr>
                <tr>
                    <td><div class="fotoProd">
                            <img src="<?=$produto['imagem'] ?>" width="50px" height="50px"/>
                        </div>
                        <div class="precoProd">
                            R$ <?=$produto['preco'] ?>
                        </div>

                    </td>
                    <td class="tdDescricao">
                        <div class="descricaoProd">
                            <?= utf8_encode($produto['descricao']) ?>
                        </div>
                        <div class="itemPed">
                            <span class="linhaQnt">
                                <span class="labelQnt">Quantidade:</span>  
                                <input type="text"  class="qntItem" alt="99" value="0"/> 
                                <img src="/theme/default/imgs/mais.jpg" width="15px" height="15px" class="imgMais"/>
                                <img src="/theme/default/imgs/menos.jpg" width="15px" height="15px" class="imgMenos"/>
                            </span>
                        </div>
                    </td>
                </tr>    
            </table>
        </li>
    <?php endforeach; ?>
</ul>




